<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <!--禁止缩放-->
    <meta name="format-detection" content="telephone=no"/>
    <!--忽略数字为电话号码-->
    <title>丹寨万人长桌宴</title>
    <meta name="description" content="丹寨万人长桌宴"/>
    <meta name="keywords" content="丹寨万人长桌宴"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/nprogress.css"/>

    <link rel="stylesheet" href="css/swiper.min.css"/>

    <style>
        html,body{ width:100%; height:100%; overflow:hidden;}
        body{
            background-image: url("https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/mine_750.jpg");
            width: 100%;
            background-size: cover;
            background-position: center center;
        }
        @media screen and (min-width: 800px){
            body{
                background-image: url("https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/mine.jpg");
                width: 100%;
                background-size: cover;
                background-position: center center;
            }
        }
    </style>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="//js.tarsocial.com/h5stat-2.1.1.js"></script>
</head>
<body>

<!--进度显示-->
<div class="mask_layer hbcreat  dis_none">
    <p  id="span1">正在生成中...</p>
</div>

<div class="wrap fade out">
    <!--背景遮罩-->
    <div class="bg-black dis_none" ></div>

    <div class="content mine">
        <a href="index.html" class="goback"><img src="https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/back@2x.png"> </a>
        <div class="person">
            <div class="top">
                <img src="https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/nickname.png" class="img_border01">
                <p>昵称</p>
                <img src="" class="photo_pic">
            </div>
            <div class="middle">
                <img src="https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/border.png" class="border">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <!--<div class="swiper-slide">-->
                            <!--<img src="image/order.png" class="img_border02">-->
                            <!--<h5>订单号</h5>-->
                            <!--<h5 style="margin-bottom: 1.5vh;">99999</h5>-->
                            <!--<h3>座位区</h3>-->
                            <!--<h3>阅历陈香区</h3>-->
                            <!--<h3>座位编号</h3>-->
                            <!--<div class="seatlist">-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                                <!--<h3>001</h3>-->
                            <!--</div>-->
                            <!--<p class="dateTime">下单时间：2019-02-21 12:20:25</p>-->
                            <!--<img src="image/haspayed.png" class="haspayed">-->
                        <!--</div>-->
                        <!--<div class="swiper-slide">-->

                            <!--<img src="image/order.png" class="img_border02">-->
                            <!--<h5>订单号</h5>-->
                            <!--<h5 style="margin-bottom: 1.5vh;">99999</h5>-->
                            <!--<h3>座位区</h3>-->
                            <!--<h3>阅历陈香区</h3>-->
                            <!--<h3>座位编号</h3>-->
                            <!--<div class="seatlist">-->
                                <!--<h3>001</h3>-->
                            <!--</div>-->
                            <!--<p class="dateTime">下单时间：2019-02-21 12:20:25</p>-->

                        <!--</div>-->
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>

                <img src="https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/border.png" class="border">
            </div>
            <div class="bottom">
                <a href="javascript: void(0);" onclick="saveCard();"><img src="https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/ok.png"></a>
            </div>
            <div class="remind" style="display: none;">
                <img src="https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/word.png">
            </div>
        </div>

        <!--生成图片-->
        <div class="person" id="person">
            <div class="other">
                <img src="" class="tx" crossorigin="anonymous">
                <!--<img src="image/tk_rules.png" class="tx">-->
                <p>0</p>
                <span class="location"></span>
            </div>
            <img src="http://cdn.gre27.cn/wdczy/image/hb.png" class="hbBg" crossorigin="anonymous">
            <!--<img src="image/hb.png" class="hbBg">-->
        </div>

        <div class="creatImg">
            <!--<img src="" id="get_share" style="position: absolute;top:0;left:0;width: 100%;height:100%;opacity: 0;z-index:-1;"/>-->
            <img src="" id="get_share" style="width:4.6rem;background-size:cover;opacity: 0;z-index:-1;" />
            <img src="https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/shareClose2.png" class="shareClose dis_none">
        </div>

    </div>
    <!--content-->
</div>

</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/percent.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/common.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/mine.js"></script>

<script src="js/html2canvas.min.js"></script>
<script>
    function saveCard(){
        var area_name = $('.swiper-slide-active input[name="area_name"]').val();
        var seat_num = $('.swiper-slide-active input[name="seat_num"]').val();
        $('#person .location').html(area_name);
        $('#person p').html(seat_num);

        var showCard=document.querySelector("#person");
        var shareImg=document.querySelector("#get_share");

        hbShow();

        showCard.style.opacity=1;
        html2canvas(document.querySelector("#person"),{
            async: true,    //是否异步解析和呈现元素
            taintTest: true, //在渲染前测试图片
            useCORS: true,      //用来设置是否允许使用跨域的图片进行访问
            scale: 5,
            backgroundColor: null  //背景色透明
        }).then(function(canvas) {
            BGimgshow();
            closeShow();
            shareImg.style.zIndex=9999;
            shareImg.style.opacity=1;
            canvas.setAttribute('id','thecanvas');
            var strURI = canvas.toDataURL();
            shareImg.src = strURI;
            showCard.style.opacity = 0;
        });
    }

    $(".shareClose").click(function(){
        closeBGimg();
        closeClose();
        initCreateImg();
    });

    function initCreateImg() {
        var html = '';
        html += '<div class="creatImg">';
        html += '<img src="" id="get_share" style="width:4.6rem;background-size:cover;opacity: 0;z-index:-1;" />';
        html += '<img src="https://wdoss.oss-cn-hangzhou.aliyuncs.com/wdczy/image/shareClose2.png" class="shareClose dis_none">';
        html += '</div>';
        $('.creatImg').remove();
        $('#person').after(html);
        $(".shareClose").click(function(){
            closeBGimg();
            closeClose();
            initCreateImg();
        });
    }
</script>
</html>